<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>平抛运动</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <style>
        body,
        html {
            padding: 0;
            margin: 0;
        }

        .block {
            height: 100vh;
            position: relative;
            width: 100vw;
            background: #000;
        }

        .ball {
            position: absolute;
            background: #fff;
            border-radius: 50%;
            width: 30px;
            height: 30px;
        }
    </style>
</head>

<body>

    <div class="block" id="wrap"></div>
</body>
<script>

    // initialization
    $(function () {
        class Ball {
            constructor(props) {
                this.x = props.x || 0
                this.y = props.y || 0
                this.w = props.w || 30
                this.h = props.h || 30
                this.root = props.root
                this.g = 100
                this.t = 1
                this.ball = null
            }
            drawBall() {
                let dom = document.getElementById(this.root)
                let ballDiv = document.createElement('div')
                ballDiv.className = 'ball'
                ballDiv.setAttribute('left', this.x + 'px')
                ballDiv.setAttribute('top', this.y + 'px')
                this.ball = ballDiv
                dom.appendChild(ballDiv)
            }
            animation() {
                this.x += 8
                this.t += 1 / 60

                console.log(this.t)
                let v = this.g * this.t
                this.y = this.g * Math.pow(this.t, 2) / 2
                this.ball.style.left = this.x + 'px'
                this.ball.style.top = this.y + 'px'
                let clientHeight = document.documentElement.clientHeight - 50
                let clientWidth = document.documentElement.clientWidth - 50
                if (this.x >= clientWidth || this.y >= clientHeight) {
                    this.x = 1
                    this.y = 1
                    this.t = 1
                }
                requestAnimationFrame(this.animation.bind(this))
            }

        }
        let ball = new Ball({ x: 1, y: 1, root: 'wrap' })
        ball.drawBall()
        ball.animation()
    });
</script>

</html>